<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <link rel="stylesheet" type="text/css" href="css/demo.css" th:href="@{/pot/css/demo.css}"/><!--演示页面样式，使用时可以不引用-->
    <link rel="stylesheet" href="./css/main.css" th:href="@{/pot/css/main.css}"/>

    <link rel="stylesheet" href="./dist/sortable.min.css" th:href="@{/pot/dist/sortable.min.css}"/>


    <script type="text/javascript" src="./dist/sortable.min.js" th:src="@{/pot/dist/sortable.min.js}"></script>
    <style>
        form{
            padding-top: 50px;
            border: ;

        }
        .a-upload ,.fh{
            padding: 4px 10px;
            height: 30px;
            width: 100px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }
        .fh{float: right;margin-top:-50px}

        .a-upload  input {
            position: absolute;

            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }

    </style>
</head>
<body>
<script>
    function sign() {
        let infile=document.getElementById("setfile").value;
        if (infile==''){
            alert("请选择文件进行提交");
            return phtot.html;
        }
    }
</script>
<div class="container" style="border-color: pink;">
    <form method="post" action="/upload" enctype="multipart/form-data">
        <input type="file"  name="file" id="setfile"/><br>
        <input type="submit" value="提交" onclick="sign()"/>
        <!--            <input type="file" class="a-upload" name="file" id="">上传文件<br />-->
        <!--        <input type="submit"   class="a-upload" value="提交"/>-->
    </form>
    <a href="usercenter.html">  <input class="fh"  type="submit" value="返回"></a>
    <main class="sortable">
        <div class="container">
            <div class="wrapper">
                <ul class="sortable__nav nav">
                    <li>
                        <a data-sjslink="all" class="nav__link">
                            <h2>相册</h2>
                        </a>
                    </li>

                </ul>


                <div id="sortable" class="sjs-default"  >
                    <div data-sjsel="flatty" th:each="item : ${session.photoPath}">
                        <div class="card" >
                            <img  src="/22" th:src="${item.path} "  alt="">
                            <div class="card-infos">
                                <h2 class="card__title" th:text="${item.datetime}">Example</h2>
                                <p class="card__text">
                                </p>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </main>
</div>
<script type="text/javascript">
    document.querySelector('#sortable').sortablejs()
</script>

</body>
</html>